<template>

  <view class="com-search feat-grid">
    <scroll-view scroll-y="true" style="height: 600rpx;padding-bottom: 20rpx">

      <view v-for="(item,index) in renderData.list" class="script-item script-item-small">

        <view class="script-item-box fx-row-b">
          <view class="script-item-box-img main-bg"
                :style="{'background-image': 'url('+ item.script?.cover +')'}"
          >
          </view>

          <view class="script-item-box-content fx-col-b">
            <view class="script-item-box-content-title fx-row-s">
              <view class="title-name com-overflow">{{ item.script?.title }}</view>
            </view>
            <view class="script-item-box-content-author fx-row-b">
              <view class="fx-row-s" style="align-items: end;">
                <view class="script-item-box-content-author-text"> 账号：1900002343423423</view>
              </view>
            </view>
          </view>

          <view class="script-item-box-op">
            <u-radio-group v-model="renderData.radio" active-color="#303030">
              <uv-radio :name="index" :disabled="false"></uv-radio>
            </u-radio-group>
          </view>
        </view>

      </view>
    </scroll-view>

    <view class="com-search-op fx-row-b">
      <button @click="handleSub('cancel')" class="com-search-op-cancel">取消</button>
      <button @click="handleSub('confirm')" class="com-search-op-confirm">确定</button>
    </view>

  </view>

</template>
<script setup>
import {ref, reactive,computed,toRefs,watch} from 'vue';
import { header,play } from '@/enums/constants';
import { onShow,onHide } from "@dcloudio/uni-app";
const {width , height} = {...header.middle};
const props = defineProps({
  fun:Function,
  formState:{
    type:Object,
    default:{
      search: {val:''},
      personObj:{name:'不限',val:'',currentIndex:0},
      timeObj:{name:'全部',val:'',currentIndex:0},
      yearsObj:[
        {name:'全部', val:''},
      ],
      typeObj:[
        {name:'全部', val:''},
      ]
    }
  }
});
const renderData = reactive({
  radio:0,
  list:[
    {
      script:{
        cover:'https://tcs.teambition.net/thumbnail/112x551aad230e75f65a0ac07ea44a2ca1ef/w/200/h/200',
        title:'你好',
        user:{nickname:'www'}
      }
    },
    {
      script:{
        cover:'https://tcs.teambition.net/thumbnail/112x551aad230e75f65a0ac07ea44a2ca1ef/w/200/h/200',
        title:'你好2',
        user:{nickname:'www2'}
      }
    }
  ],
  yearsList:[{name:'全部', val:''}],
  typeList:[{name:'全部', val:''}],
});

const formState = reactive(JSON.parse(JSON.stringify(props.formState)))









//确定选择
const handleSub=(type)=>{
  //过滤(typeObj)为空的数据
  /*for(let key of formState.typeObj.keys()){
    if(formState.typeObj[key]?.val == ''){
      formState.typeObj.splice(key,1);
    }
  }
  for(let key of formState.yearsObj.keys()){
    if(formState.yearsObj[key]?.val == ''){
      formState.yearsObj.splice(key,1);
    }
  }*/
  let d = JSON.parse(JSON.stringify(formState))
  props.fun(type,d);
}


</script>

<style lang="scss" scoped>
.com-search{
  background-color: #fff;

  .script-item{
    background-color: $main-text-e;
    @include main-line2;
    //padding-left:0 !important;
    //padding-right:0 !important;
  }
  .script-item-box{
    &-img{
      width: 80rpx;
      height: 80rpx;
    }
    &-op{
      .icon-btn-e{
        background-color: transparent !important;
      }
      .icon-btn-e:after{border:1px solid $main-text-b;}
    }
  }



  &-op{
    position: relative;
    background-color: $main-text-e;
    &-cancel,&-confirm{
      width: 50%;
      border-radius: 0;
      padding:0 20rpx;
      line-height: 3; &:after{border-radius:0px;border:none;}
    }
    &-cancel{background-color:#fff;color:$main-text-a;}
    &-confirm{background-color:#fff;color:$main-a; }
    &:after{
      position: absolute;
      content: "";
      height: 80%;
      width: .5px;
      left:50%;
      background-color: $main-text-d;
    }
  }
}
</style>
